<template>
<!--    歌手列表组件-->
    <div>
        <br>
        <div class="rightTabs">
            <div>
                <a href="#" style="text-decoration: none;" v-for="group in data" @click="addEventListener">
                    {{group.title}}<br>
                </a>
            </div>
        </div>

<!--        </el-affix>-->
        <div>
            <div v-for="group in data" :key="group.title" name="group">
                <h3 class="title">{{group.title}}</h3>
                <br><br><br>
                <ui>
                    <li  ref="groupRef" v-for="item in group.list" :key="item.id" class="item"
                         @click="singerDetail(item)"
                    >
                    <span class="avatar" >
                        <el-image :src="item.pic" lazy  />
                    </span>
                        <a class="name">{{item.name}}</a>
                    </li>
                    <el-divider style="width: 100%" border-style="dashed" />
                </ui>

            </div>
        </div>


    </div>
</template>

<script>
export default {
    name: 'index-list',
    emits:['select'],
    props: {
        data:{
            type: Array,
            default() {
                return [];
            }
        }
    },
    setup(props,{ emit }) {
        const singerDetail = item => {
            emit('select', item)
            //console.log(item)
        }
        return{
            singerDetail
        }
    }
}
</script>

<style scoped>
.item{
    height: 100px;
    list-style: none;
}

.title{
    font-size: 18px;
    float: left;
    margin-left: 10px;
}

.avatar{
    display: inline-table;
}

.el-image{
    position: absolute;
    left: 50px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.name{
    text-align: center;
    font-size: 20px;
    display: block;
    padding-top: 20px;
    cursor:pointer
}

.rightTabs{
    height: 500px;
    width: 50px;
    top: 200px;
    position: sticky;
    float: right;
}
</style>
